<template>
  <div>
    <van-search
      class="input"
      v-model="value"
      placeholder="搜索歌曲，歌词，专辑"
      shape="round"
      color="#ebecec"
      @search="onSearch"
    />

    <!-- 热门搜索 -->
    <div class="header" v-if="value == ''">
      <div class="m_default">
        <h3>热门搜索</h3>
        <div class="m_hotlist">
          <div class="list" v-for="(item, index) in search" :key="index">
            <ul>
              <li @click="add_hot(item.first)" class="list_li">
                {{ item.first }}
              </li>
            </ul>
          </div>
        </div>

        <div class="m_history">
          <p>历史记录</p>
          <div
            class="history_list"
            v-for="(item, index) in value_a"
            :key="index"
          >
            <div class="history_left">
              <van-icon name="underway-o" />
              <div class="left_zi">
                {{ item }}
              </div>
            </div>

            <!-- 右边 -->
            <div class="history_right" @click="remove">
              <van-icon size="20" class=" icon_a" name="cross" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="honme" v-else>
      <!-- 搜索热词 -->
      <div class="m_recom" v-if="onoff">
        <h3>搜索 "{{ value }}"</h3>
        <ul>
          <li
            class="li"
            v-for="(item, index) in searchterms"
            :key="index"
            @click="add(item.keyword)"
          >
            <van-icon name="search" />

            <span> {{ item.keyword }} </span>
          </li>
        </ul>
      </div>

      <!--  点击搜索页 -->
      <div class="keyword" v-else>
        <h3>最佳匹配</h3>
        <song
          v-for="(item, index) in key"
          :key="index"
          :id_list="id_list"
          :ids="index"
          :song_data="{
            song_name: item.name,
            song_ar: item.artists,
            song_people: item.name,
            id: item.id,
          }"
        ></song>
      </div>
    </div>
  </div>
</template>

<script>
import { get_search, get_keywords, get_suggest } from "../../api/search";
import song from "../../components/song";
export default {
  data() {
    return {
      search: [],
      searchterms: [],
      value: "",
      value_a: [],
      key: [],
      onoff: false,
    };
  },
  computed: {
    // 使用计算属性筛选出新歌榜所以id的集合
    id_list() {
      return this.key.map((el) => el.id);
    },
  },
  methods: {
    onSearch(val) {
      if (!val) {
        return;
      }

      this.value_a.push(val);

      get_keywords(val).then((res) => {
        console.log(res);
        this.key = res.data.result.songs;
      });
    },

    remove(i) {
      this.value_a.splice(i, 1);
    },
    add(i) {
      this.value = i;
      this.onSearch(i);
    },
    add_hot(i) {
      this.value = i;
      this.onSearch(i);
      this.onoff = !this.onoff;
    },
  },

  created() {
    get_search().then((res) => {
      console.log(res);
      this.search = res.data.result.hots;
    });
  },
  watch: {
    value(val) {
      if (!val) {
        console.log(111111);
        return;
      }
      get_suggest(val).then((res) => {
        console.log(res);
        this.searchterms = res.data.result.allMatch;
        this.onoff = !this.onoff;
      });
    },
  },
  components: {
    song,
  },
};
</script>

<style lang="scss" scoped>
.input {
  border-radius: 15px;
}

.header {
  .m_default {
    h3 {
      font-size: 12px;
      line-height: 12px;
      color: #666;
      text-align: left;
      padding-top: 15px;
      padding-left: 10px;
    }

    .m_hotlist {
      padding: 8px 0;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;

      .list {
        display: inline-block;
        padding-left: 16px;
        .list_li {
          text-align: left;
          // display: inline-block;
          height: 32px;
          border: 1px solid #d3d4da;
          border-radius: 15px;
          margin-right: 8px;
          margin-bottom: 8px;
          padding: 0 5px;
          font-size: 13px;
          line-height: 32px;
          color: #333;
        }
      }
    }

    .m_history {
      p {
        text-align: left;
        font-size: 12px;
        line-height: 12px;
        color: #666;
        padding: 15px 15px 0;
      }

      .history_list {
        display: flex;
        justify-content: space-between;

        .icon_a {
          color: #d3d4da;
          margin-top: 3px;
        }

        .history_left {
          display: flex;
          padding: 10px 15px;

          .left_zi {
            padding-left: 15px;
            font-size: 14px;
          }
        }

        .history_right {
          padding-right: 25px;
          margin-top: 6px;
        }

        // .wire {
        //   width: 10px;
        //   text-align: center;
        // }
      }
    }
  }
}

.honme {
  // 搜索热刺

  .m_recom {
    text-align: left;

    // position: fixed;
    width: 100%;

    background-color: #fff;

    h3 {
      margin-left: 10px;
      height: 50px;
      padding-right: 10px;
      font-size: 15px;
      line-height: 50px;
      color: #507daf;
    }

    ul {
      margin-left: 10px;

      .li {
        display: flex;
        align-items: center;
        height: 45px;

        i {
          width: 15px;
          height: 46px;
          line-height: 45px;
        }

        span {
          font-size: 15px;
          line-height: 45px;
          color: #333;
          padding-left: 10px;
        }
      }
    }
  }

  .keyword {
    text-align: left;

    h3 {
      margin-left: 10px;
      font-size: 12px;
      line-height: 16px;
      color: #666;
    }

    // .remd_newsg {
    //   margin-left: 5px;

    //   .remd_song {
    //     padding: 6px 0;
    //     display: flex;
    //     justify-content: space-between;

    //     .remd_left {
    //       text-align: left;

    //       .f_thide {
    //         font-size: 17px;
    //       }

    //       .sginfo {
    //         font-size: 12px;
    //         color: #888;
    //       }
    //     }

    //     .remd_right {
    //       padding: 0 10px;
    //       font-size: 22px;
    //       color: #888;
    //     }
    //   }
    // }
  }
}
</style>
